<template>
  <el-table class="sa-table" :data="data" stripe>
    <template #empty>
      <sa-empty />
    </template>
    <el-table-column prop="id" label="ID" min-width="90" />
    <el-table-column label="订单号" min-width="260">
      <template #default="scope">
        {{ scope.row.order?.order_sn || scope.row.order_id }}
      </template>
    </el-table-column>
    <el-table-column label="下单用户" min-width="160">
      <template #default="scope">
        <sa-user-profile :user="scope.row.buyer" :id="scope.row.buyer_id" />
      </template>
    </el-table-column>
    <el-table-column label="分佣状态" min-width="100" align="center">
      <template #default="scope">
        <span :class="`sa-color--${statusStyle[scope.row.commission_reward_status]}`">
          {{ scope.row.commission_reward_status_text }}
        </span>
      </template>
    </el-table-column>
    <el-table-column label="商品结算金额" min-width="160" align="center">
      <template #default="scope"> {{ scope.row.amount }}元 </template>
    </el-table-column>
    <el-table-column label="分销总金额/到账金额" min-width="160" align="center">
      <template #default="scope">
        {{ countCommission(scope.row.rewards) }}
      </template>
    </el-table-column>
    <el-table-column label="佣金详情" min-width="200" align="center">
      <template #default="scope">
        <div class="sa-flex sa-row-center">
          <div
            class="rewards-item sa-flex sa-flex-col"
            v-for="rewards in scope.row.rewards"
            :key="rewards"
          >
            <template v-if="rewards.agent">
              <sa-image :url="rewards.agent.avatar" size="32" radius="16"></sa-image>
            </template>
            <template v-if="!rewards.agent">
              {{ rewards.agent_id }}
            </template>
            <div class="commission sa-m-t-6">{{ rewards.commission }}元</div>
          </div>
        </div>
      </template>
    </el-table-column>
    <el-table-column prop="commission_time" label="加入时间" min-width="172" />
  </el-table>
</template>

<script setup>
  const props = defineProps(['data']);

  const statusStyle = {
    0: 'info',
    1: 'success',
    '-1': 'warning',
    '-2': 'danger',
  };

  function countCommission(row) {
    if (row) {
      let commission = 0;
      let commissioned = 0;
      row.forEach((r) => {
        if (r.status == 1) {
          commissioned += Number(r.commission);
        }
        commission += Number(r.commission);
      });

      return `${commission}元/${commissioned}元`;
    }
  }
</script>
<style lang="scss" scoped>
  .rewards-item {
    margin-right: 8px;
    &:last-of-type {
      margin-right: 0;
    }
  }
</style>
